<template>
    <div>
        <div class="container">
            <el-row>
              <el-col span="6">
                <div class="select">
                    <div class="title">
                        <span>选择店铺</span>
                    </div>
                    <div class="function">
                        <avue-select v-model="formValue" class="search_select_select" placeholder="请选择内容"
                         type="tree" :dic="getDicSelect" @change="changeValue"></avue-select>
                    </div>
                </div>
              </el-col>
              <el-col span="6">
                <div class="select">
                    <div class="title">
                        <span>商品id</span>
                    </div>
                    <div class="function">
                        <avue-input v-model="productIdInput" placeholder="多个商品编码逗号','隔开" ></avue-input>
                    </div>
                </div>
              </el-col>
              <el-col span="6" v-if="closeFunction">
                <div class="select">
                    <div class="title">
                        <span>商品SKU</span>
                    </div>
                    <div class="function">
                        <avue-input v-model="productSKUInput" placeholder="多个商品编码逗号','隔开" ></avue-input>
                    </div>
                </div>
              </el-col>
              <el-col span="6">
                <div class="select">
                    <div class="title">
                        <span>商品标题</span>
                    </div>
                    <div class="function">
                        <avue-input v-model="productTitleInput" placeholder="请输入商品标题关键字" ></avue-input>
                    </div>
                </div>
              </el-col>
            </el-row>
            <el-row class="row_select_two">
              <el-col span="16">
                <div class="select_tow" v-show="closeFunction">
                    <div>
                        <span>商品展示</span>
                    </div>
                    <div class="boxCOntainer">
                        <avue-checkbox all v-model="productCheckBoxList" placeholder="请选择内容" :dic="productCheckBoxDic"></avue-checkbox>
                    </div>
                </div>
              </el-col>
              <el-col span="8">
                    <div class="button_select">
                        <el-button style="background-color: rgb(3, 179, 178);" @click="conditionSelect">查询</el-button>
                    </div>
              </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { getProductListByLongId } from '@/api/product_source/product_source'
import { mapGetters, mapMutations } from 'vuex';
export default {
    name: 'TicketSystemAdminSelect',
    data() {
        return {
            form:'',
            formValue: '',
            form1:[0,1],
            dic:[{
            label:'选项1',
            desc:'描述1',
            disabled:true,
            value:0
            },{
            label:'选项2',
            desc:'描述2',
            value:1
            }],
            productIdInput: '',
            productTitleInput: '',
            productSKUInput: '',
            productCheckBoxList: [
                {
                label:'查看待拿货的商品',
                value:1
                },{
                label:'查看含手动添加商品源的商品',
                value:1
                },{
                label:'查看无商品货源的商品',
                value:1
                }
            ],
            productCheckBoxDic:[{
            label:'查看待拿货的商品',
            desc:'查看待拿货的商品',
            value:1
            },{
            label:'查看含手动添加商品源的商品',
            desc:'描述2',
            value:1
            },{
            label:'查看无商品货源的商品',
            desc:'描述2',
            value:1
            }],
            openFunction: true, // 用于是否开放展示功能
            closeFunction: false, // 用于是否关闭展示功能
        };
    },

    updated() {
        this.setFormValue()
    },

    computed: {
        ...mapGetters('productSource', ['GET_PRODUCT_SOURCE_SHOP_ID', 'GET_PRODUCT_ID_VALUE']),
        getDicSelect() {
            return this.GET_PRODUCT_SOURCE_SHOP_ID && this.GET_PRODUCT_SOURCE_SHOP_ID
        }
    },

    methods: {
        ...mapMutations('productSource', ['UPDATE_PRODUCT_ID_VALUE']),
        setFormValue() {
            this.formValue = this.GET_PRODUCT_ID_VALUE
        },
        async conditionSelect() {
            const { data } = await getProductListByLongId(this.productIdInput, 1, 20, this.GET_PRODUCT_ID_VALUE, this.productTitleInput)
            this.$emit("getProductListByLongId", data)
        },
        changeValue(value) {
            this.UPDATE_PRODUCT_ID_VALUE(value)
        }
    },
};
</script>

<style lang="scss" scoped>
.select {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .title {
        margin-right: 20px;
    }

    .function {
        width: 260px;
        .el-input, .el-select, input {
            width: 100%;
        }
    }
}
.select_tow {
    display: flex;
    width: 100%;
    margin: 25px 0;
    .boxCOntainer {
        width: 80%;
        .avue-checkbox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            padding-left: 20px;
            /deep/.el-checkbox-group > .el-checkbox > .el-checkbox__label{
                font-size: 16px!important;
            }
        }
    }
}
.row_select_two {
    display: flex;
    justify-content: center;
    align-items: center;
}
.button_select {
    display: flex;
    margin: 25px 0;
    justify-content: center;
    align-items: center;
    .el-button {
        color: white;
        border-radius: 5px;
    }
}
</style>
<style>
    .el-select-dropdown__wrap {
        padding-bottom: 20px!important;
    }
</style>
